<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../pages/template.xhtml">
	<ui:define name="head">
		<title>#{msg.tecnicosTitle}</title>
	</ui:define>
	<ui:define name="left"></ui:define>
	<ui:define name="center">
		<h:form prependId="false" styleClass="formPrincipal">
			<p:growl id="msgs" showDetail="true"/>
			<!-- Mirar el p:collector -->
			<p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="../images/loading.gif" />
				</f:facet>
				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
			<p:panel header="#{msg.nuevoTecnico}" id="nuevo">
				<h:panelGrid columns="8">
					<h:outputLabel value="#{msg.nombre}:"></h:outputLabel>
					<p:inputText value="#{tecnicosBean.newTecnico.nombre}"></p:inputText>
					<h:outputLabel value="#{msg.apellidos}:"></h:outputLabel>
					<p:inputText value="#{tecnicosBean.newTecnico.apellidos}"></p:inputText>
					<h:outputLabel value="#{msg.nombreUsuario}:"></h:outputLabel>
					<p:inputText style="width:260px;"
						value="#{tecnicosBean.newTecnico.nombreUsuario}"></p:inputText>
					<h:outputLabel value="#{msg.pass}:"></h:outputLabel>
					<h:inputSecret value="#{tecnicosBean.newTecnico.contrasena}"
						class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"></h:inputSecret>
					<h:outputLabel value="#{msg.departamento}:"></h:outputLabel>
					<h:panelGrid columns="2">
						<p:selectOneMenu value="#{tecnicosBean.selectedDepartamento}"
							effect="fade">
							<f:selectItem itemLabel="#{msg.seleccioneDepartamento}" itemValue="" />
							<f:selectItems value="#{tecnicosBean.nombreDepartamentos}" />
						</p:selectOneMenu>
					</h:panelGrid>
					<h:outputLabel value="#{msg.perfil}:"></h:outputLabel>
					<p:selectOneMenu value="#{tecnicosBean.selectedPerfil}"
						effect="fade">
						<f:selectItem itemLabel="#{msg.seleccionePerfil}" itemValue="" />
						<f:selectItems value="#{tecnicosBean.perfiles}" />
					</p:selectOneMenu>
					<p:commandButton value="#{msg.guardar}"
						action="#{tecnicosBean.addTecnico}" update="tecnicos,nuevo,msgs">
						<p:collector value="#{tecnicosBean.newTecnico}"
							addTo="#{tecnicosBean.tecnicos}" />
					</p:commandButton>
					<p:commandButton value="#{msg.limpiar}" type="reset"></p:commandButton>
				</h:panelGrid>
			</p:panel>

			<!-- Mirar las tablas seleccionmode y row edition -->
			<p:panel header="#{msg.listadoTecinos}" style="margin-top: 10px;"
				id="tecnicos">
				<p:dataTable id="tecnicosList" styleClass="table"
					value="#{tecnicosBean.tecnicos}" var="tecnicoVar"
					emptyMessage="#{msg.tablaVacia}" paginator="true" rows="20"
					rowEditListener="#{tecnicosBean.updateTecinco}">
					<p:column headerText="#{msg.nombre}" style="width:125px"
						sortBy="#{tecnicoVar.nombre}" filterBy="#{tecnicoVar.nombre}">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{tecnicoVar.nombre}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{tecnicoVar.nombre}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="#{msg.apellidos}" style="width:125px"
						sortBy="#{tecnicoVar.apellidos}"
						filterBy="#{tecnicoVar.apellidos}">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{tecnicoVar.apellidos}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{tecnicoVar.apellidos}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="#{msg.nombreUsuario}" style="width:125px"
						sortBy="#{tecnicoVar.nombreUsuario}"
						filterBy="#{tecnicoVar.nombreUsuario}">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{tecnicoVar.nombreUsuario}" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{tecnicoVar.nombreUsuario}"
									style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="#{msg.pass}" style="width:125px">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{tecnicoVar.contrasena}" />
							</f:facet>
							<f:facet name="input">
								<h:inputSecret value="#{tecnicoVar.contrasena}"></h:inputSecret>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="#{msg.departamento}" style="width:125px"
						sortBy="#{tecnicoVar.departamentoBean.nombre}"
						filterBy="#{tecnicoVar.departamentoBean.nombre}">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{tecnicoVar.departamentoBean.nombre}" />
							</f:facet>
							<f:facet name="input">
								<h:selectOneMenu value="#{tecnicosBean.selectedDepartamento}"
									effect="fade">
									<f:selectItem itemLabel="Seleccione un departamento"
										itemValue="" />
									<f:selectItems value="#{tecnicosBean.nombreDepartamentos}" />
								</h:selectOneMenu>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="#{msg.perfil}" style="width:125px"
						sortBy="#{tecnicoVar.perfil}" filterBy="#{tecnicoVar.perfil}">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{tecnicoVar.perfil}" />
							</f:facet>
							<f:facet name="input">
								<h:selectOneMenu value="#{tecnicoVar.perfil}">
									<f:selectItem itemLabel="Seleccione un perfil" itemValue="" />
									<f:selectItems value="#{tecnicosBean.perfiles}" />
								</h:selectOneMenu>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="#{msg.opciones}" style="width:50px">
						<p:rowEditor />
						<p:commandLink title="#{msg.eliminar}" onclick="confirmDelete.show();" styleClass="ui-icon ui-icon-close">
							<f:setPropertyActionListener target="#{tecnicosBean.newTecnico}"
								value="#{tecnicoVar}"></f:setPropertyActionListener>
						</p:commandLink>
					</p:column>
				</p:dataTable>
				<p:confirmDialog id="confirmDialog" message="#{msg.eliminarTecnico}"
					header="#{msg.confirmacion}" severity="alert" widgetVar="confirmDelete"
					modal="true">
					<p:commandButton value="#{msg.si}" action="#{tecnicosBean.deleteTecnico}"
						update="tecnicosList,tecnicos,msgs" oncomplete="confirmDelete.hide();" />
					<p:commandButton value="#{msg.no}" onclick="confirmDelete.hide();"
						type="button" />
				</p:confirmDialog>
			</p:panel>

		</h:form>
	</ui:define>
</ui:composition>